<template>
  <div class="topbox">
    <div class="addtopbox">
      <h1 class="addVolunTitle">申请志愿活动</h1>
      <el-form
          label-position="right"
          label-width="100px"
          :model="volunteer"
          style="max-width: 460px"
          :rules="volunteerRules"
          ref="volunteerRef"
      >
        <el-form-item label="标题" prop="vtitle">
          <el-input v-model="volunteer.vtitle" placeholder="大标题"/>
        </el-form-item>
        <el-form-item label="副标题" prop="vsubhead">
          <el-input v-model="volunteer.vsubhead" placeholder="小标题"/>
        </el-form-item>
        <el-form-item label="详细信息" prop="vdetail">
          <el-button @click="this.dialogVisible = true;this.tempVdetail = volunteer.vdetail">点击编辑</el-button>


          <!--          <QuillComp @update="getDetail" style="width: 90%;height: 300px"></QuillComp>
                    <svg style="margin:0 0 auto 5px"
                         t="1691805526589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         p-id="4010" width="300" height="300"
                         @click="this.dialogVisible = true;this.tempVdetail = volunteer.vdetail"
                    >
                      <path
                          d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z"
                          fill="#8a8a8a" p-id="4011"></path>
                    </svg>-->
          <!--          <el-input type="textarea" :rows="5" v-model="volunteer.vdetail" placeholder="详细信息"/>-->
        </el-form-item>
        <el-form-item label="上传图片" prop="vimage">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="volunteer.vimage" :src="volunteer.vimage" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动位置:" prop="vaddress">
          <div class="detailstate">
            <el-input style="width: 380px" v-model="realAdd" placeholder="选择或输入位置"/>
          </div>
          <div class="drawStation">
            <div id="draw-station-container">

            </div>
          </div>
        </el-form-item>
        <div class="button">
          <el-button @click="subNews()">提交</el-button>
          <el-button @click="reset()">重置</el-button>
        </div>

      </el-form>
    </div>
  </div>
  <!--文本输入框-->
  <el-dialog
      v-model="dialogVisible"
      title="输入内容"
      width="80%"
  >
    <QuillComp @update="getDetail" style="width: 100%;height: 500px"></QuillComp>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false;this.volunteer.vdetail = tempVdetail">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import * as AMapLoader from "@amap/amap-jsapi-loader";
import doThis from "@/api/getData";
import axios from "axios";
import QuillComp from "@/util/QuillComp.vue";
import {ElMessage} from "element-plus";

export default {
  name: "AddVolunte",
  components: {
    QuillComp
  },
  data() {
    return {
      dialogVisible: false,
      tempVdetail: '',
      volunteer: {
        vtitle: '',
        vsubhead: '',
        vdetail: '',
        vaddress: '',
        vimage: '',

      },
      volunteerRules: {
        vtitle: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {max: 8, message: '长度必须小于8个字符', trigger: 'blur'},
        ],
        vsubhead: [
          {required: true, message: '请输入副标题', trigger: 'blur'},
          {max: 12, message: '长度必须小于12个字符', trigger: 'blur'},
        ],
        vdetail: [
          {required: true, message: '请输入详细信息', trigger: 'blur'},
        ],
        vaddress: [
          {required: true, message: '请输选择活动地点', trigger: 'blur'},
        ],
        vimage: [
          {required: true, message: '请上传封面图片', trigger: 'blur'},
        ]
      },
      defcenter: {
        x: 121.380676,
        y: 37.539237,
      },
      // 地图对象
      // 地图实例对象
      map: null,
      // 标点对象
      marker: null,

      // 真实地址
      realAdd: '',
      temprealAdd: ''
    }
  },
  watch: {
    realAdd() {
      console.log(this.realAdd)
      if (this.realAdd !== '' && this.temprealAdd !== this.realAdd) {
        axios.get("https://restapi.amap.com/v3/geocode/geo", {
          params: {
            output: 'json',
            key: 'f5e5504bd7700d7045245f8b7ca45b29',
            address: this.realAdd,
          }
        }).then(res => {
          console.log(res)
          if (res.status === 200) {
            this.temprealAdd = this.realAdd
            this.defcenter.x = res.data.geocodes[0].location.split(',')[0]
            this.defcenter.y = res.data.geocodes[0].location.split(',')[1]
            this.map.setZoomAndCenter(16, [res.data.geocodes[0].location.split(',')[0], res.data.geocodes[0].location.split(',')[1]])
          }
        })
      }
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '105771500d5f91b00104a0d28ea72c41', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
          .then((AMap) => {
            this.map = new AMap.Map("draw-station-container", {
              resizeEnable: true,
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式
              zoom: 15, //初始化地图级别
              center: [this.defcenter.x, this.defcenter.y], //初始化地图中心点位置
              mapStyle: 'amap://styles/macaron', //设置地图的显示样式
            })
            // 地图点击事件
            this.map.on('click', this.clickMapHandler)
          })
    },
    // 点击地图事件
    clickMapHandler(e) {
      // 将经纬度放在data里面用于传向数据库
      this.volunteer.vaddress = e.lnglat.getLng() + "," + e.lnglat.getLat()
      // 用于重置时初始化地图
      this.defcenter.x = e.lnglat.getLng()
      this.defcenter.y = e.lnglat.getLat()
      this.addFlg(e)
      // 将标记转为真实地址
      axios.get("https://restapi.amap.com/v3/geocode/regeo", {
        params: {
          output: 'json',
          location: e.lnglat.getLng() + ',' + e.lnglat.getLat(),
          key: 'f5e5504bd7700d7045245f8b7ca45b29',
          radius: '1000',
          extensions: 'all'
        }
      }).then(res => {
        console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
        console.log(res.data.regeocode.formatted_address)
        this.realAdd = res.data.regeocode.formatted_address
        this.temprealAdd = this.realAdd
      })

    },
    /**
     * 地图添加蓝色标点
     * @param e
     */
    addFlg(e) {
      // 清空标记
      if (this.marker != null) {
        this.map.remove(this.marker)
      }
      this.marker = null
      // 生成标记
      // eslint-disable-next-line no-undef
      this.marker = new AMap.Marker({
        map: this.map,
        position: [e.lnglat.getLng(), e.lnglat.getLat()],
      })
    },
    handleAvatarSuccess(e) {
      this.volunteer.vimage = e.data.url
    },
    reset() {
      this.volunteer = {
        vtitle: '',
        vsubhead: '',
        vdetail: '',
        vaddress: '',
        vimage: '',
      }
      this.initMap()
    },
    subNews() {
      this.$checkLogin()
      this.$refs['volunteerRef'].validate((res) => {
        if (res) {
          /*       volunteer: {
                   vtitle: '',
                       vsubhead: '',
                       vdetail: '',
                       vaddress: '',
                       vimage: '',*/
          let data = new FormData()
          data.set("vtitle", this.volunteer.vtitle)
          data.set("vsubhead", this.volunteer.vsubhead)
          data.set("vdetail", this.volunteer.vdetail)
          data.set("vaddress", this.volunteer.vaddress)
          data.set("vimage", this.volunteer.vimage)
          doThis.doPost("/volunteer/add", data).then(res => {
       /*     alert(res.msg)
            if (res.code === "0") {
              this.reset()
            }*/
            if (res.code === "0") {
              ElMessage({
                message: res.msg,
                type: 'success',
              })
              this.reset()
            }else {
              ElMessage.error(res.msg)
            }
          })
        }
      })
    },
    getDetail(e) {
      this.tempVdetail = e
      console.log(e)
    },

  },
  mounted() {
    this.initMap()
  },
  beforeUnmount() {
    console.log()
    this.map.destroy('beforeUnmount running');
    this.map = null
    this.marker = null
  }
}
</script>

<style scoped>

.addtopbox {
  background: #ffff;
  width: 600px;
  margin: 0 auto;
}

.button {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
}

.drawStation #draw-station-container {
  padding: 0;
  /* margin: 20px 0 20px 0; */
  margin: 50px auto;
  width: 500px;
  height: 300px;
}

.detailstate {
  font-size: 16px;
  height: 10px;
}

.topbox {
  background: #ffff;
  margin: 0 auto;
  width: 1200px;
  padding: 40px;
}

.addVolunTitle {
  margin-bottom: 25px;
  text-align: center;
}
</style>